<template>
	<view class="order-detail">
		<view class="top-bar">
			<block v-if="options.status == '4'">
				<text class="top-bar-title">订单配送中</text>
				<text class="top-bar-subhead">骑手订单配送中~</text>
			</block>
			<block v-else>
				<text class="top-bar-title">订单已送达</text>
				<text class="top-bar-subhead">骑手订单已送达~</text>
			</block>
		</view>
		<view class="main">
			<view class="track track-top">
				<text class="track-number">{{detail.gainOrderNumber || ''}}</text>
				<text>取餐号</text>
			</view>
			<view class="flow-box">
				<view class="flow">
					<view class="flow-item">
						<view class="flow-title">
							<view class="flow-title-tip"></view>
							<text class="flow-title-text">{{detail.storeShopDO.name}}</text>
						</view>
						<view class="flow-content">
							<text class="flow-content-text">{{detail.storeShopDO.address}}</text>
						</view>
					</view>
					<view class="flow-item">
						<view class="flow-title">
							<view class="flow-title-tip"></view>
							<text class="flow-title-text">{{detail.userAddressName || ''}}</text>
						</view>
						<view class="flow-content">
							<text class="flow-content-text">{{detail.userAddress}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flow-box">
				<view class="foods">
					<view class="foods-box">
						<view class="foods-item" v-for="(item, index) in detail.storeOrderCartInfoDOList" :key="index">
							<image class="food-img" :src="item.image || '/static/success.svg'" mode="aspectFill"></image>
							<view class="food-info">
								<view class="food-title">
									<text class="food-name">{{item.title}}</text>
									<text class="food-num">×{{item.number}}</text>
								</view>
								<text class="food-price">¥ {{item.price}}</text>
							</view>
						</view>
					</view>
					<text class="food-price-total"> ¥ {{detail.totalPrice || ''}}</text>
				</view>
			</view>
			<view class="flow-box">
				<view class="order-info">
					<text class="order-title">订单消息</text>
					<view class="order-line">
						<text class="info-type">订单编号:</text>
						<view class="info-detail">
							<text>{{detail.orderId}}</text>
							<text class="copy" @click="copy(detail.orderId)">复制</text>
						</view>
					</view>
					<view class="order-line">
						<text class="info-type">下单时间:</text>
						<text class="info-detail">{{ruleTime(detail.createTime)}}</text>
					</view>
					<view class="order-line">
						<text class="info-type">支付时间:</text>
						<text class="info-detail">{{ruleTime(detail.payTime)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-bar" v-if="options.status == '4'">
			<view class="bottom-button" @click="showDialog = true">
				<text>订单送达</text>
			</view>
		</view>
		<view class="dialog" v-if="showDialog">
			<view class="dialog-mask" @click="showDialog = false"></view>
			<view class="dialog-wrapper">
				<view class="dialog-title">
					<text class="dialog-title-text">温馨提示</text>
					<image @click="showDialog = false" class="dialog-close" src="/static/close.svg" mode="aspectFit"></image>
				</view>
				<text class="dialog-subhead">请确认您的订单是否送达~</text>
				<image class="dialog-bell" src="/static/bell.svg" mode="aspectFit"></image>
				<view class="track">
					<text class="dialog-track">{{detail.userAddressName || ''}}</text>
					<text class="track-location">{{detail.userAddress}}</text>
				</view>
				<view class="dialog-button" @click="Confirm()">
					<text>确认送达</text>
				</view>
			</view>
		</view>
		<view class="dialog dialog-success" v-if="showSuccess">
			<view class="dialog-mask" @click="showSuccess = false"></view>
			<view class="dialog-wrapper">
				<image @click="showSuccess = false" class="dialog-close" src="/static/close.svg" mode="aspectFit"></image>
				<image class="success-icon" src="/static/success.svg" mode="aspectFit"></image>
				<text class="success-text">送达成功</text>
			</view>
		</view>
	</view>
</template>

<script>
	import rider from '@/api/rider.js'
	export default {
		data() {
			return {
				options: {
					orderId: '',
					status: ''
				},
				detail: {
					storeOrderCartInfoDOList: [],
					storeShopDO: {}
				},
				showDialog: false,
				showSuccess: false
			}
		},
		onLoad(options) {
			this.options = options
			this.getDetail()
		},
		methods: {
			getDetail() {
				rider.getOrderInfoById(this.options.orderId)
				.then(res => {
					let { data } = res
					this.detail = data
				})
			},
			Confirm() {
				uni.getStorageSync('data') && rider
					.delivery(this.detail.orderId, uni.getStorageSync('data').data.userId)
					.then(res => {
						let { code } = res
						if (code == 0) {
							this.showDialog = false
							this.showSuccess = true
							return
						}
						uni.toast({
							title: '操作失败',
							icon: 'error'
						})
					})
			},
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			ruleTime(time) {
				return rider.ruleTime(time)
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f5f5f5;
	}
	
	.order-detail {
		--bottom-height: 116rpx;
		background: #f5f5f5;
	}
	
	.top-bar {
		padding: 30rpx 20rpx 70rpx;
		background: #5caf5d;
		display: flex;
		flex-direction: column;
	}
	
	.top-bar-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}
	
	.top-bar-subhead {
		font-size: 26rpx;
		color: #fff;
		padding-top: 20rpx;
	}
	
	.main {
		padding: 0 20rpx calc(var(--bottom-height) + 20rpx);
	}
	
	.track {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #333;
	}
	
	.track-top {
		background: #fff;
		border-radius: 28rpx;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		margin-top: -50rpx;
		padding: 30rpx 0;
		box-shadow: 0 -2px 5px 1px rgba(0,0,0,.1);
	}
	
	.track-number {
		padding-bottom: 40rpx;
	}
	
	.flow-box {
		padding-top: 20rpx;
	}
	
	.flow {
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		
	}
	
	.flow-item {
		display: flex;
		flex-direction: column;
	}
	
	.flow-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 8rpx 0;
	}
	
	.flow-title-tip {
		width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		border: 2px solid #5caf5d;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flow-title-tip::after {
		content: '';
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #5caf5d;
	}
	
	.flow-title-text {
		font-size: 26rpx;
		padding-left: 28rpx;
		flex: 1;
	}
	
	.flow-content {
		font-size: 24rpx;
		color: #b4b4b4;
		padding: 0 0 0 16rpx;
		display: flex;
		flex-direction: row;
	}
	
	.flow-content::before {
		content: '';
		width: calc(28rpx + 16rpx);
		box-sizing: border-box;
		border-left: 1px dashed #5caf5d;
	}
	
	.flow-item:nth-last-child(1) .flow-content::before {
		border: none;
	}
	
	.flow-content-text {
		padding: 14rpx 0;
	}
	
	.foods {
		padding: 20rpx;
		border-radius: 16rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
	}
	
	.foods-box {
		display: flex;
		flex-direction: column;
		border-bottom: 1.5px dashed #e4e4e4;
	}
	
	.foods-item {
		display: flex;
		flex-direction: row;
		padding-bottom: 20rpx;
	}
	
	.food-img {
		width: 172rpx;
		height: 136rpx;
		border-radius: 12rpx;
	}
	
	.food-info {
		padding-left: 24rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #333;
	}
	
	.food-title {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.food-name {
		font-size: 32rpx;
		font-weight: bold;
		flex: 1;
	}
	
	.food-num {
		font-size: 26rpx;
	}
	
	.food-price {
		font-size: 28rpx;
		font-weight: bold;
		align-self: flex-end;
	}
	
	.food-price-total {
		font-size: 28rpx;
		line-height: 28rpx;
		padding-top: 20rpx;
		font-weight: bold;
		color: #ff2c2c;
		align-self: flex-end;
	}
	
	.food-price-total::before {
		color: #333;
		font-size: 30rpx;
		content: '共计: ';
	}
	
	.order-info {
		padding: 20rpx;
		border-radius: 16rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
	}
	
	.order-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		padding-bottom: 20rpx;
		border-bottom: 1.5px dashed #e4e4e4;
	}
	
	.order-line {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
	}
	
	.info-type {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}
	
	.info-detail {
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}
	
	.copy {
		font-size: 28rpx;
		color: #4ba1fc;
		padding-left: 20rpx;
	}
	
	.bottom-bar {
		z-index: 98;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: var(--bottom-height);
		background: #fff;
		box-shadow: 0 -2px 5px 1px rgba(0,0,0,.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bottom-button {
		width: calc(100% - (66rpx * 2));
		height: 64rpx;
		border-radius: 32rpx;
		background: #5caf5d;
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.dialog {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
	}
	.dialog-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	
	.dialog-wrapper {
		width: calc(100% - (82rpx * 2));
		padding: 30rpx 20rpx;
		border-radius: 16rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 2;
	}
	
	.dialog-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.dialog-title-text {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.dialog-close {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	
	.dialog-subhead {
		font-size: 26rpx;
		padding: 30rpx 0 24rpx 0;
	}
	
	.dialog-bell {
		width: 92rpx;
		height: 100rpx;
		align-self: center;
		padding-bottom: 20rpx;
	}
	
	.dialog-track {
		font-size: 26rpx;
	}
	
	.track-location {
		font-size: 24rpx;
		color: #bbbbbb;
		padding-top: 20rpx;
	}
	
	.dialog-button {
		width: 440rpx;
		height: 64rpx;
		background: #5caf5d;
		border-radius: 32rpx;
		color: #fff;
		font-size: 26rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		align-self: center;
	}
	
	.dialog-success .dialog-close {
		top: 20rpx;
		right: 20rpx;
		transform: none;
	}
	
	.success-icon {
		width: 237rpx;
		height: 140rpx;
		align-self: center;
	}
	
	.success-text {
		font-size: 30rpx;
		color: #333;
		padding-top: 36rpx;
		align-self: center;
	}
</style>
